<template>
	<view class="u-wrap">
		<!-- 搜索框 -->
		<u-search v-model="keywords" @change="searchBtn" margin="20rpx 0rpx" :show-action="true" action-text="搜索" :animation="true"></u-search>
		<view class="tab-strickt">
			<u-tabs active-color="#FF7670" name="categoryName" count="cate_count" :list="tabList" :is-scroll="true"
				v-model="current" @change="change"></u-tabs>
		</view>
		<!-- 瀑布流列表 -->
	<view class="contain">
		<scroll-view :scroll-top="scrollTop" scroll-y="true">
				<view class="list" v-for="(item, index) in flowList" :key="index">
					<view @click="toDetail(item)" :index="index">
						<!-- 用户信息 -->
							<view class="useInfo">
								<view class="useLeft">
									<img  class="useLeft" :src="item.userPicture" alt="" />
								</view>
								<view class="userRight">
									<view class="userName">{{item.nickName}}</view>
									<view class="userDate">{{item.createTime}}</view>
								</view>
							</view>
							<!-- 商品 -->
							<view class="product">
								<view class="Instructions">
									{{item.goodsName}}
								</view>
								<view v-if="item.image != ''" class="photoes">
									<img class="photoes" :src="item.image" alt="" />
								</view>
							</view>
							<!-- 底部 -->
							<view class="listBottom">
								<!-- 评论与浏览量 -->
								<view class="bottom_left">
									<view class="say">{{item.commentCount}}评论</view>
									<view class="say">{{item.goodsView}}浏览</view>
								</view>
								<view class="bottom_right">
									<view class="money">￥{{item.goodsPrice}}</view>
								</view>
							</view>
						<hr />
					</view>
					
				</view>
		</scroll-view>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadMore"></u-loadmore>
	</view>
	</view>
</template>

<script setup>
	import { onReady,onReachBottom,onShow,onPullDownRefresh } from '@dcloudio/uni-app';
	import {ref} from 'vue';
	import {getCateListApi,getUsedListApi} from '../../api/goods.js'
	import {addGoodsView} from '../../api/index.js'
	const tabList = ref([])
	const current = ref(0)
	const uWaterfall1 = ref()
	const loadStatus = ref('loadmore')
	//瀑布流
	const flowList = ref([])
	//获取分类数据
	const getCateList = async()=>{
		let res = await getCateListApi()
		if(res && res.code == 200){
			console.log(res)
			tabList.value = res.data;
			//分类数据的第一位添加全部
			tabList.value.unshift({
				categoryId:'',
				categoryName:'全部',
				orderNum:0
			})
		}
	}
	// 下拉刷新
	onPullDownRefresh(()=> {
		getUsedList()
		uni.stopPullDownRefresh()
	})
	//分类点击事件
	const categoryId = ref('')
	const change = (e)=>{
		categoryId.value = tabList.value[e].categoryId
		console.log(categoryId.value)
		//清空列表数据
		currentPage.value = 1;
		//清空瀑布流的数据
		// uWaterfall1.value.clear()
		flowList.value = []
		//调用列表
		getUsedList()
	}
	//获取闲置列表数据
	const currentPage = ref(1)
	const pageSize = ref(10)
	const keywords = ref('')
	const pages = ref(0)
	const getUsedList = async()=>{
		let res = await getUsedListApi({
			currentPage:currentPage.value,
			pageSize:pageSize.value,
			categoryId:categoryId.value,
			keywords:keywords.value
		})
		if(res && res.code == 200){
			console.log(res)
			flowList.value = res.data.goodsList
			pages.value = res.data.pages
		}
	}
	//关键字搜索
	const searchBtn = ()=>{
		currentPage.value = 1;
		//清空瀑布流的数据
		// uWaterfall1.value.clear()
		flowList.value = []
		//获取数据
		getUsedList()
	}
	//加载更多
	const loadMore = async()=>{
		console.log('加载更多')
		if(currentPage.value >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		//获取数据
		let res = await getUsedListApi({
			currentPage:currentPage.value,
			pageSize:pageSize.value,
			categoryId:categoryId.value,
			keywords:keywords.value
		})
		flowList.value = flowList.value+res.data.goodsList
		// getUsedList()
	}
	//触底加载
	onReachBottom(()=>{
		console.log('触底加载')
		if(currentPage.value >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		//获取数据
		getUsedList()
	})
	//跳转详情页
	const toDetail = (item)=>{
		addGoodsView(item.goodsId)
		uni.navigateTo({
			url:"../unused_detail/unused_detail?goods=" + JSON.stringify(item)
		})
	}
	// onReady(()=>{
	// 	getCateList()
	// 	getUsedList()
	// })
	// 页面展示时发起请求
	onShow(()=>{
		getCateList()
		getUsedList()
	})
</script>

<style lang="scss">
	.tab-strickt {
		position: sticky;
		z-index: 99;
		top: 0;
		left: 0;
	}

.useInfo{
	display: flex;
	padding: 10px ;
	.useLeft{
		background-color: antiquewhite;
		width: 36px;
		height:  36px;
		border-radius: 18px;
	}
	.userRight{
		margin-left: 10px;
		.userName{
			font-size: 14px;
			margin-bottom: 3px;
		}
		.userDate{
			font-size: 11px;
			color: #989898;
		}
	}
}
.product{
	padding: 10px;
		.Instructions{
			font-size: 16px;
			margin-bottom: 10px;
		}
		.photoes{
			/* background-color: #989898; */
			width:100px;
			height: 100px;
			border-radius: 20px;
		}
}
.list{
	padding: 0 10px;
}
.listBottom{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 10px;
	.bottom_left{
		display: flex;
		padding: 10px;
		color: #989898;
		.say{
			margin-right: 10px;
		}
	}
	.bottom_right{
		width: 150rpx;
		// background-color: #f8d10c;
		border-radius: 20px;
		margin-right: 15px;
		height: 30px;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center;     /* 垂直居中 */
		.money{
			display: flex;
			justify-content: center; /* 水平居中 */
			align-items: center;     /* 垂直居中 */
			font-size: 20px;
			color: #ff570a;
			font-weight: 600;
			// background-color: #ffba92;
			width: 50px;
			border-radius: 20px 0 0 20px;
		}
		// .contact{
		// 	display: flex;
		// 	justify-content: center; /* 水平居中 */
		// 	align-items: center;     /* 垂直居中 */
		// 	color: azure;
		// 	font-size: 16px;
		// 	padding-left: 10px;
		// }
	}
}
.contain{
	padding-bottom: 50px;
}
	/*去掉tabs选项卡滚动条*/
	scroll-view ::v-deep ::-webkit-scrollbar {
	   width: 0;
	   height: 0;
	   color: transparent
	}
</style>
